<template>
  <div id="app">
    <div class="wrap" v-if="show">
      <div class="pic1">
        <img src="./assets/img/my-logo.png" />
      </div>
    </div>

    <keep-alive include="test">
      <router-view v-if="$route.meta.keepAlive" />
    </keep-alive>
    <keep-alive include="MyDynamic">
      <router-view v-if="!$route.meta.keepAlive" />
    </keep-alive>
  </div>
</template>

<script>
import jwtDecode from 'jwt-decode' 
import { Notify } from 'vant';
import axios from 'axios'
export default {
  name: "App",
  data() {
    return {
      show: false,
      decode:null
    };
  },
  components: {
    // Dynamic,MyFooter,Square
  },

  mounted() { 
    if(sessionStorage.getItem('token')){
      let token=sessionStorage.getItem("token")
      this.decode = jwtDecode(token);
      //如果登录就连上ws
      this.global.localSocket(this.decode.userId)
      //连上之后要接收服务器发来的消息
      this.global.ws.onmessage = (msg)=>{
        let aa = JSON.parse(msg.data)
            console.log(aa)
        if(aa.fromUserId != this.decode.userId){
            this.getUnread()//接收数据之后未读消息会变
            //判断是系统消息还是点赞之类的
            if(aa.form){
              //如果不是系统消息，而且不是自己操作了自己的帖子
              if(aa.form != this.decode.userId){
                Notify({
                  message: `${aa.content} : ${aa.bodyMessage}`,
                  type: 'success',
                  duration: 2000,//自定义时长
                });
                this.getUnread()
              }
              // console.log('不是系统')
            }else{
              Notify({
                message: `系统通知：${aa.content}`,
                type: 'success',
                duration: 2000,//自定义时长
              });
              this.getUnread()
              // console.log('系统消息')
            }
        }
      }
      
    }
    //  判断页面是首次加载还是刷新
    if (window.performance.navigation.type === 1) {
      console.log("页面被刷新"); 
    } else {
      //  首次加载的话显示启动页内容，设置延时器再取消显示
      console.log("首次加载");
      this.show = true;
      setTimeout(() => {
        this.show = false;
      }, 4000);
    }
  },
  crated(){
    //连接断开的时候要重置聊天窗口
    this.global.ws.onclose(()=>{
      let resetParam = new URLSearchParams()
      resetParam.append('userId',this.decode.userId)
      axios({
        url:'/chat/resetWindows',
        method:'post',
        data:resetParam
      }).then(data=>{
        console.log(data)
      }).catch(err=>{
        console.log(err)
      })
    })
  },
  methods: {
      getUnread(type){
          //查看未读消息数
        axios({
            url:'/body/findUnread',
            method:'get',
            params:{
                userId:this.decode.userId,
                classes:type
            },
            headers:{
                'Authentication-Token':JSON.parse(sessionStorage.getItem("token"))
            }
        }).then(data=>{
            if(data.data.code === 20000){
                let a = data.data.data
                //查看私信未读消息数
                axios({
                    url:'/chat/unread',
                    method:'get',
                    params:{
                        userId:this.decode.userId
                    }
                }).then(data=>{
                    let b = data.data.data
                    sessionStorage.setItem('allUnread',a+b)
                })
            }
        }).catch(err=>{
            console.log(err)
        })
      }
        
  },
  
};
</script>

<style lang="less">
* {
  padding: 0px;
  margin: 0px;
}
html,
body,
.container {
  height: 100%;
}
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.top {
  flex: 1;
  overflow-y: scroll;
  display: flex;
  flex-direction: column;
}
.main {
  flex: 1;
  overflow-y: scroll;
}

//测试
#app {
  height: 100%;
}
//  启动页样式
.wrap {
  width: 100vw;
  height: 100vh;
  background-color: white;
  box-sizing: border-box;
  overflow: hidden;
  position: fixed;
  z-index: 2;
}
.wrap .pic1 {
  position: relative;
  width: 100%;
  top: 48px;
}
.pic1 img {
  opacity: 0;
  width: 100%;
  // height: 100%;
  margin-top: 20%;
  position: absolute;
  animation-name: fadeIn; /*动画名称*/
  animation-duration: 1s; /*动画持续时间*/
  animation-iteration-count: 1; /*动画次数*/
  animation-delay: 0s; /*延迟时间*/
  animation-fill-mode: forwards;
}
.pic1 img:nth-child(2) {
  left: 128px;
  top: 48px;
  animation-name: fadeIn; /*动画名称*/
  animation-duration: 1s; /*动画持续时间*/
  animation-iteration-count: 1; /*动画次数*/
  animation-delay: 1s; /*延迟时间*/
  animation-fill-mode: forwards;
}
.pic1 img:nth-child(3) {
  left: 208px;
  top: 48px;
  animation-name: fadeIn; /*动画名称*/
  animation-duration: 1s; /*动画持续时间*/
  animation-iteration-count: 1; /*动画次数*/
  animation-delay: 2s; /*延迟时间*/
  animation-fill-mode: forwards;
}
@keyframes fadeIn {
  0% {
    opacity: 0; /*初始状态 透明度为0*/
  }
  50% {
    opacity: 0; /*中间状态 透明度为0*/
  }
  100% {
    opacity: 1; /*结尾状态 透明度为1*/
  }
}
</style>









